<template>
  <div class="detail" v-if="goods">
    <div class="detail-head">
      <span><i class="iconfont icon-shouye" @click="handleback"></i></span>
      <span>商品详情</span>
      <span><i class="iconfont icon-sousuo"></i></span>
    </div>
    <div class="detail-swiper"><img :src="goods.productImg"></div>
    <div class="goods-msg">
      <div class="goods-name">{{ goods.productTitle }}</div>
      <div class="goods-price">
        <span class="nowprice">￥{{ goods.sellPrice }}</span>
        <span class="oldprice">￥{{ goods.originalPrice }}</span>
      </div>
      <div class="goods-discount">
        <span v-for="(item,index) in goods.productIconList" :key="index">{{ item.title }}</span>
      </div>
      <div class="full-reduce">
        <div class="full-name"><span>满减</span></div>
        <div class="full-msg">
          <span v-for="(item,index) in goods.productIconList" :key="index">{{ item.title }},最高减2000</span>
          <span>2020-03-04 - 2020-03-08</span>
        </div>
      </div>
    </div>
    <div class="detail-img">
      <div class="single-img" v-for="(item,index) in parentProduct.itemDetailIntroVoList" :key="index">
        <img :src="item.content" alt="">
      </div>
    </div>
    <div class="proInfo">
      <div class="leftline">—</div>
      <div class="infoTitle">
        <span class="zh">产品信息</span>
        <span class="en">INFORMATION</span>
      </div>
      <div class="rightline">—</div>
    </div>
    <div class="info-img">
      <div v-for="(item,index) in parentProduct.itemSizeImgVoList" :key="index">
        <img :src="item.iconUrl" alt="">
      </div>
    </div>
    <div class="specs">
      <ul class="specsul">
        <li>详细规格参数</li>
        <li v-for="(item,index) in parameter" :key="index">
          <span>{{ item.attributeName }}</span>
          <span class="parameter">{{ item.attributeValueText }}</span>
        </li>
      </ul>
    </div>
    <div class="proInfo">
      <div class="leftline">—</div>
      <div class="infoTitle">
        <span class="zh">推荐搭配</span>
        <span class="en">MATCH</span>
      </div>
      <div class="rightline">—</div>
    </div>
    <div class="collocation">
      <div class="col-img" v-if="parentProduct.itemRecommendVo">
        <img :src="parentProduct.itemRecommendVo.imgSrc" alt="">
      </div>
    </div>
    <div class="cation-goods" v-if="parentProduct.itemRecommendVo">
      <div class="single-cation" v-for="(item,index) in parentProduct.itemRecommendVo.recommendSkuList.slice(0,3)" :key="index">
        <img :src="item.productImg" alt="">
        <span class="cation-title">{{ item.productTitle}}</span>
        <div class="cation-price">
          <span>￥{{ item.sellPrice }}</span>
          <span>￥{{ item.originalPrice }}</span>
        </div>
      </div>
    </div>
    <div class="proInfo">
      <div class="leftline">—</div>
      <div class="infoTitle">
        <span class="zh">猜你喜欢</span>
        <span class="en">WHAT'S  HOT</span>
      </div>
      <div class="rightline">—</div>
    </div>
    <div class="youlike">
      <div class="like-goods" :key="item.productId" v-for="item in recommend">
        <img :src="item.productImg" alt="">
        <p class="like-title">{{ item.productTitle}}</p>
        <div class="like-price">
          <span>￥{{ item.sellPrice }}</span>
          <span>￥{{ item.originalPrice }}</span>
        </div>
      </div>
    </div>
    <div class="help">
      <span>需要帮助</span>
      <span>周一至周日 9:00 - 21:00</span>
    </div>
    <div class="blank"></div>
    <div class="detail-foot">
      <div class="icon-cart">
        <i class="iconfont icon-shoucang-kongxin"></i>
        <i class="iconfont icon-gouwuche"></i>
      </div>
      <div class="join-cart" @click="handleLogin">加入购物车</div>
      <div class="buy" @click="handleLogin">立即购买</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      goods: {},
      parentProduct: [],
      parameter: [],
      recommend: []
    }
  },
  methods: {
    ...mapMutations('tabbar', ['hide', 'show']),
    handleback () {
      this.$router.back()
    },
    handleLogin () {
      this.$router.push('/login')
    }
  },
  mounted () {
    this.hide()
    const products = localStorage.getItem('goods')
    this.goods = JSON.parse(products)
    axios.get(`/itemdetail/skuInfos/${this.$route.params.goodsId}?_=1583414076605`).then(res => {
      this.parameter = res.data.data.skuAttrPairs
      console.log(this.parameter)
    })
    axios.get(`/itemdetail/spuInfos/${this.goods.parentProductId}?_=1583476470338`).then(res => {
      this.parentProduct = res.data.data
    })
    axios.get(`/recommend/item?skuId=${this.$route.params.goodsId}&_=1583476470341`).then(res => {
      console.log(res.data.data)
      this.recommend = res.data.data
    })
  },
  destroyed () {
    this.show()
  }
}
</script>
<style lang="scss" scoped>
.detail{
  background:rgb(245, 245, 245)
}
img{
  width: 100%;
}
.detail-head{
  width: 100%;
  background: white;
  height: 45px;
  border-bottom:1px solid rgb(240, 239, 239);
  display: flex;
  align-items: center;
  padding: 0px 15px;
  box-sizing: border-box;
  span{
    flex: 1;
    text-align: center;
    font-size: 18px;
    .iconfont{
      font-size: 20px;
    }
  }
  span:nth-child(2){
    font-weight: bold;
  }
  span:nth-child(1){
    text-align: left;
  }
  span:nth-child(3){
    text-align: right;
  }
}
.detail-swiper{
  height: 330px;
  border-bottom:1px solid black;
  box-sizing: border-box;
}
.goods-msg{
  background: white;
  padding: 30px 25px 20px;
  .goods-name{
    font-size: 18px;
  }
  .goods-price{
    margin-top: 10px;
    .nowprice{
      font-weight: bold;
      font-size: 22px;
    }
    .oldprice{
      text-decoration: line-through;
      font-size: 12px;
      color: #adadad;
      margin-left: 10px;
    }
  }
  .goods-discount{
    font-size: 12px;
    color: white;
    margin-top: 8px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
    span{
      background: rgb(255, 112, 112);
      padding: 0px 5px;
    }
  }
}
.full-reduce{
  display: flex;
  margin-top: 15px;
  .full-name{
    span{
      font-size: 12px;
      color: palevioletred;
      border: 1px solid palevioletred;
      padding: 1px 4px;
    }
  }
  .full-msg{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    font-size: 12px;
    color: gray;
  }
}
.single-img{
  margin-bottom: 10px;
}
.proInfo{
  display: flex;
  justify-content: center;
  margin: 15px 0px;
  align-items: center;
  .leftline{
    margin-right: 8px;
  }
  .rightline {
    margin-left: 8px;
  }
  .infoTitle{
    display: flex;
    flex-direction: column;
    text-align: center;
    .en{
      font-size: 12px;
      margin-top: 5px;
    }
  }
}
.specs{
  background: white;
  margin-top: -3px;
}
.specsul{
  padding: 0px 20px;
  li{
    width: 100%;
    font-size: 12px;
    color: gray;
    padding-bottom: 8px;
    padding-top: 8px;
    border-bottom: 1px solid #ddd;
    span{
      display: inline-block;
    }
    span:nth-child(1){
      width: 30%;
    }
    .parameter{
      width: 70%;
    }
  }
  li:nth-child(1){
    font-size: 16px;
    padding-bottom: 15px;
    color: black;
  }
  li:last-child{
    border-bottom: none;
  }
}
.cation-goods{
  display: flex;
  justify-content: space-between;
  background: white;
  padding:0px 20px 15px;
  .single-cation{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    .cation-title{
      width: 100%;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
      text-align: center;
    }
    .cation-price{
      margin-top: 5px;
      span:nth-child(1){
        font-size: 14px;
      }
      span:nth-child(2){
        font-size: 12px;
        text-decoration: line-through;
        color: #ddd;
        margin-left: 3px;
      }
    }
  }
}
.youlike{
  background: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .like-goods:nth-child(2n-1){
    border-right: 1px solid #f0f0f0
  }
  .like-goods:last-child{
    border-bottom: none;
  }
  .like-goods{
    border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;
    padding: 10px 17px 35px;
    width: 50%;
    .like-title{
      font-size: 14px;
      color: #ccc;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .like-price{
      margin-top:3px;
      span:nth-child(1){
        font-size: 14px;
      }
      span:nth-child(2){
        font-size: 12px;
        color: #ddd;
        text-decoration: line-through;
        margin-left: 10px;
      }
    }
  }
}
.help{
  padding: 25px;
  background: white;
  margin: 20px 0px;
  padding-left: 20px;
  font-size: 14px;
  span:nth-child(2){
    color: palevioletred;
    margin-left: 10px;
  }
}
.blank{
  height: 50px;
}
.detail-foot{
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  height: 50px;
  div{
    flex: 1;
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
  .buy{
    background: rgb(255, 212, 68);
  }
  .join-cart{
    background: rgb(245, 245, 245);
  }
  .icon-cart{
    .iconfont{
      font-size: 26px;
    }
    i:nth-child(1){
      margin-right: 15px;
    }
  }
}
</style>
